<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="UTF-8">
	<meta name="viewport"
		content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" />

	<!-- 引入 Vue 和 Vant 的 JS 文件 -->
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
	<!-- vue ajax -->
	<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

	<title>注册店铺</title>
</head>

<body>
	<div id="app">
		<!-- 头部导航 -->
		<van-nav-bar title="注册店铺" left-arrow @click-left="onClickLeft"></van-nav-bar>
		<!-- 表单 -->
		<van-form @submit="onSubmit">
			<van-field v-model="shopName" name="shopName" label="店铺名称" placeholder="店铺名称"
				:rules="[{ required: true, message: '请填写店铺名称' }]">
			</van-field>
			<!-- 店铺分类 -->
			<van-field readonly clickable name="shopCategoryId" :value="shopCategory" label="店铺分类"
				placeholder="点击选择店铺类别" @click="shopCategoryShowPicker = true"></van-field>
			<van-popup v-model="shopCategoryShowPicker" position="bottom">
				<van-picker show-toolbar :columns="shopCategoryItem" :value-key="shopCategoryNameForColumns"
					@confirm="onConfirmForShopCategory" @cancel="shopCategoryShowPicker = false" />
			</van-popup>
			<!-- 所属区域 -->
			<van-field readonly clickable name="areaId" :value="area" label="所属区域" placeholder="点击选择所属区域"
				@click="areaShowPicker = true"></van-field>
			<van-popup v-model="areaShowPicker" position="bottom">
				<van-picker show-toolbar :columns="areaItem" :value-key="areaNameForColumns" @confirm="onConfirmForArea"
					@cancel="areaShowPicker = false" />
			</van-popup>
			<van-field v-model="shopAddr" label="详细地址" placeholder="详细地址"
				:rules="[{ required: true, message: '请填写详细地址' }]"></van-field>
			<!-- 输入手机号，调起手机号键盘 -->
			<van-field v-model="phone" type="tel" label="联系电话" name="phone" placeholder="联系电话"
				:rules="[{ required: true, message: '请填写手机号码' }]"></van-field>
			<van-field name="uploader" label="店铺图片">
				<template #input>
					<van-uploader v-model="shopImg" multiple :max-count="1" />
				</template>
			</van-field>
			<van-field v-model="shopDesc" rows="1" autosize label="店铺简介" type="textarea" placeholder="请输入店铺介绍">
			</van-field>
			<van-field v-model="sms" center clearable label="验证码" placeholder="请输入验证码">
				<template #button>
					<van-image width="120" height="30" :src="kaptchaUrl" @click="changeKaptchaUrl" />
				</template>
			</van-field>
			<div style="margin: 16px;">
				<van-button round block type="info" native-type="submit">提交</van-button>
			</div>
		</van-form>
	</div>
</body>

<script>
	Vue.use(vant.NavBar);
	Vue.use(vant.Form);
	Vue.use(vant.Uploader);

	var app = new Vue({
		el: "#app",
		data: {
			shopName: '',
			phone: '',
			shopAddr: '',
			shopImg: [],
			shopDesc: '',
			shopCategoryId: 0,
			areaId: 0,

			shopCategory: '',
			shopCategoryShowPicker: false,
			shopCategoryItem: [],
			shopCategoryNameForColumns: 'shopCategoryName',
			area: '',
			areaShowPicker: false,
			areaItem: [],
			areaNameForColumns: 'areaName',

			// 验证码
			sms: '',
			kaptchaUrl: '/o2o/kaptcha',

		},
		methods: {

			// 头部返回按钮
			onClickLeft: function () {
				window.history.back(); 
			},
			// 表单提交事件
			onSubmit: function () {
				addShopInfo();
			},

			// 店铺分类
			onConfirmForShopCategory: function (value) {
				console.log(value, "店铺分类");
				this.shopCategoryId = value.shopCategoryId;
				this.shopCategory = value.shopCategoryName;
				this.shopCategoryShowPicker = false;
			},
			// 所属地区
			onConfirmForArea: function (value) {
				console.log(value, "所属地区");
				this.areaId = value.areaId;
				this.area = value.areaName;
				this.areaShowPicker = false;
			},

			// 更换验证码
			changeKaptchaUrl: function () {
				this.kaptchaUrl = '/o2o/kaptcha?' + Math.random()
			}
		}

	});

	/*获取地区列表和店铺类别*/
	axios.get('/o2o/shopadmin/toregister')
		.then(response => (
			console.log(response.data.data.area),
			// 地区
			response.data.data.area.forEach(item => {
				app.areaItem.push({ areaId: item.areaId, areaName: item.areaName });
			}),
			// 店铺类别
			response.data.data.shopCategory.forEach(item => {
				app.shopCategoryItem.push({ shopCategoryName: item.shopCategoryName, shopCategoryId: item.shopCategoryId });
			})
		)
		)
		.catch(function (error) { // 请求失败处理
			console.log(error);
		});

	/*添加店铺信息*/
	function addShopInfo() {
		let shop = {};
		shop.shopName = app.shopName;
		shop.phone = app.phone;
		shop.shopAddr = app.shopAddr;
		shop.shopDesc = app.shopDesc;
		shop.shopCategoryId = app.shopCategoryId;
		shop.areaId = app.areaId;

		// 将shop对象转为json字符串
		let shopInfo = JSON.stringify(shop);

		// 表单提交
		let formData = new FormData();
		formData.append("kaptcha", app.sms);
		formData.append("shopInfo", shopInfo);
		formData.append("shopImg", app.shopImg[0].file);

		// 提交给服务器
		$.ajax({
			url : '/o2o/shopadmin/register',
			type : 'POST',
			data : formData,
			contentType : false,
			processData : false,
			cache : false,
			success : function(data) {
				console.log(data);
				if(data.success==true){
					window.location.href="/o2o/shopadmin/listshop"; 
				}else{
					app.changeKaptchaUrl();
					alert(data.msg);
				}
			}
		});
	}
</script>

</html>